<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <title>ECharts</title>
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let img = '';
    let color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000'];
    let currentData;
    function preDealData(originData) {
        let data = [];
        for (let i = 0; i < originData.length; i++) {
            data.push({
                value: originData[i].value,
                name: originData[i].name,
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        borderWidth: 5,
                        shadowBlur: 20,
                        borderColor: color[i],
                        shadowColor: color[i]
                    }
                }
            }, {
                value: 2,
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        color: 'rgba(0, 0, 0, 0)',
                        borderColor: 'rgba(0, 0, 0, 0)',
                        borderWidth: 0
                    }
                }
            });
        }
        return data;
    }

    let option = {
        backgroundColor: '#0A2E5D',
        color: color,
        title: {
            text: '',
            top: '48%',
            textAlign: "center",
            left: "49.8%",
            textStyle: {
                color: '#fff',
                fontSize: 22,
                fontWeight: '400'
            }
        },
        graphic: {
            elements: [{
                type: "image",
                z: 3,
                style: {
                    image: img,
                    width: 178,
                    height: 178
                },
                left: 'center',
                top: 'center',
                position: [100, 100]
            }]
        },
        tooltip: {
            show: false
        },
        legend: {
            icon: "circle",
            orient: 'horizontal',
            x: 'center',
            data: [],
            right: 340,
            bottom: 100,
            align: 'left',
            textStyle: {
                color: "#fff",
                fontSize: 16
            },
            itemGap: 20
        },
        toolbox: {
            show: false
        },
        series: [{
            name: '',
            type: 'pie',
            clockWise: false,
            radius: [105, 109],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'outside',
                        color: '#ddd',
                        fontSize: 16,
                        formatter: function (params) {
                            let percent = 0;
                            let total = 0;
                            for (let i = 0; i < currentData.length; i++) {
                                total += currentData[i].value;
                            }
                            percent = ((params.value / total) * 100).toFixed(0);
                            if (params.name !== '') {
                                return params.name + '：' + percent + '%';
                            } else {
                                return '';
                            }
                        }
                    }
                }
            },
            data: []
        }]
    };
    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
        type : "get",
        async : true,
        url : '/pie/one',
        data : {},
        dataType : "json",
        success : function(result) {
            if (result.code == 200) {
                myChart.hideLoading();
                option.series.forEach(function (item,index) {
                    currentData = result.data.series[index].data;
                    item.data = preDealData(currentData);
                });
                if (result.data.legend && option.legend) {
                    option.legend.data = result.data.legend;
                }
                if (result.data.title) {
                    option.title.text = result.data.title;
                }
                myChart.setOption(option);
            }
        },
        error : function(errorMsg) {
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
